<template>
  <div class="component-market-page">
    <div class="page-header">
      <h2>组件市场</h2>
      <div class="header-actions">
        <el-button type="primary" icon="Upload">上传组件</el-button>
        <el-input
          v-model="searchKeyword"
          placeholder="搜索组件"
          prefix-icon="Search"
          style="width: 300px"
          clearable
        />
      </div>
    </div>

    <!-- 筛选栏 -->
    <el-card class="filter-card">
      <el-space wrap>
        <el-tag
          v-for="category in categories"
          :key="category.value"
          :type="selectedCategory === category.value ? 'primary' : 'info'"
          @click="selectCategory(category.value)"
          style="cursor: pointer"
        >
          {{ category.label }}
        </el-tag>
      </el-space>
      <el-divider direction="vertical" />
      <el-radio-group v-model="sortType" size="small">
        <el-radio-button label="hot">最热</el-radio-button>
        <el-radio-button label="new">最新</el-radio-button>
        <el-radio-button label="download">下载量</el-radio-button>
      </el-radio-group>
    </el-card>

    <!-- 组件列表 -->
    <el-row :gutter="20" class="component-list">
      <el-col :span="6" v-for="component in filteredComponents" :key="component.id">
        <el-card class="component-card" shadow="hover">
          <div class="component-preview">
            <img :src="component.preview" :alt="component.name" />
          </div>
          <div class="component-info">
            <div class="component-name">
              {{ component.name }}
              <el-tag v-if="component.badge" type="danger" size="small">{{ component.badge }}</el-tag>
            </div>
            <div class="component-desc">{{ component.description }}</div>
            <div class="component-meta">
              <div class="meta-item">
                <el-icon><Star /></el-icon>
                <span>{{ component.rating }}</span>
              </div>
              <div class="meta-item">
                <el-icon><Download /></el-icon>
                <span>{{ component.downloads }}</span>
              </div>
              <div class="meta-item">
                <el-tag :type="getCategoryType(component.category)" size="small">
                  {{ getCategoryLabel(component.category) }}
                </el-tag>
              </div>
            </div>
            <div class="component-actions">
              <el-button type="primary" size="small" @click="viewDetail(component)">
                查看详情
              </el-button>
              <el-button type="success" size="small" @click="installComponent(component)">
                <el-icon><Download /></el-icon>
                安装
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 组件详情对话框 -->
    <el-dialog v-model="showDetailDialog" :title="selectedComponent?.name" width="900px">
      <div v-if="selectedComponent" class="component-detail">
        <el-tabs v-model="activeDetailTab">
          <el-tab-pane label="组件介绍" name="intro">
            <div class="intro-content">
              <h4>组件描述</h4>
              <p>{{ selectedComponent.description }}</p>
              
              <h4>组件预览</h4>
              <img :src="selectedComponent.preview" style="width: 100%; border-radius: 8px" />
              
              <h4>组件信息</h4>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="组件名称">{{ selectedComponent.name }}</el-descriptions-item>
                <el-descriptions-item label="组件类别">{{ getCategoryLabel(selectedComponent.category) }}</el-descriptions-item>
                <el-descriptions-item label="版本号">{{ selectedComponent.version }}</el-descriptions-item>
                <el-descriptions-item label="作者">{{ selectedComponent.author }}</el-descriptions-item>
                <el-descriptions-item label="评分">{{ selectedComponent.rating }}</el-descriptions-item>
                <el-descriptions-item label="下载量">{{ selectedComponent.downloads }}</el-descriptions-item>
                <el-descriptions-item label="更新时间" :span="2">{{ selectedComponent.updateTime }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>

          <el-tab-pane label="使用文档" name="doc">
            <div class="doc-content">
              <h4>安装</h4>
              <pre><code>npm install {{ selectedComponent.package }}</code></pre>
              
              <h4>引入</h4>
              <pre><code>import { {{ selectedComponent.name }} } from '{{ selectedComponent.package }}'</code></pre>
              
              <h4>使用示例</h4>
              <pre><code>&lt;{{ selectedComponent.name }}
  :prop1="value1"
  :prop2="value2"
  @event="handleEvent"
/&gt;</code></pre>
              
              <h4>Props说明</h4>
              <el-table :data="selectedComponent.props" border>
                <el-table-column prop="name" label="参数名" width="150" />
                <el-table-column prop="type" label="类型" width="120" />
                <el-table-column prop="default" label="默认值" width="120" />
                <el-table-column prop="description" label="说明" />
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="在线演示" name="demo">
            <div class="demo-content">
              <iframe
                :src="selectedComponent.demoUrl"
                style="width: 100%; height: 500px; border: 1px solid #dcdfe6; border-radius: 4px"
              ></iframe>
            </div>
          </el-tab-pane>

          <el-tab-pane label="评价" name="reviews">
            <div class="reviews-content">
              <div v-for="review in selectedComponent.reviews" :key="review.id" class="review-item">
                <div class="review-header">
                  <div class="reviewer-info">
                    <el-avatar :size="40">{{ review.user[0] }}</el-avatar>
                    <div class="reviewer-name">{{ review.user }}</div>
                  </div>
                  <div class="review-rating">
                    <el-rate v-model="review.rating" disabled />
                    <span class="review-time">{{ review.time }}</span>
                  </div>
                </div>
                <div class="review-content">{{ review.content }}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
        <el-button @click="showDetailDialog = false">关闭</el-button>
        <el-button type="primary" @click="installComponent(selectedComponent)">
          <el-icon><Download /></el-icon>
          安装组件
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 搜索关键词
const searchKeyword = ref('')

// 选中的分类
const selectedCategory = ref('all')

// 排序类型
const sortType = ref('hot')

// 分类
const categories = ref([
  { label: '全部', value: 'all' },
  { label: '表单组件', value: 'form' },
  { label: '数据组件', value: 'data' },
  { label: '图表组件', value: 'chart' },
  { label: '布局组件', value: 'layout' },
  { label: '业务组件', value: 'business' }
])

// 组件列表
const componentList = ref([
  {
    id: 1,
    name: '高级表格',
    description: '功能强大的数据表格组件，支持排序、筛选、导出等',
    category: 'data',
    preview: 'https://via.placeholder.com/300x200?text=Advanced+Table',
    rating: 4.8,
    downloads: 12586,
    version: 'v2.5.0',
    author: '张三',
    updateTime: '2025-01-10',
    badge: 'HOT',
    package: '@lowcode/advanced-table',
    demoUrl: 'https://demo.example.com/table',
    props: [
      { name: 'data', type: 'Array', default: '[]', description: '表格数据' },
      { name: 'columns', type: 'Array', default: '[]', description: '列配置' },
      { name: 'loading', type: 'Boolean', default: 'false', description: '加载状态' }
    ],
    reviews: [
      { id: 1, user: '李四', rating: 5, time: '2025-01-12', content: '非常好用的组件，功能强大！' },
      { id: 2, user: '王五', rating: 4, time: '2025-01-11', content: '整体不错，希望能增加更多自定义选项' }
    ]
  },
  {
    id: 2,
    name: 'ECharts图表',
    description: '基于ECharts封装的图表组件库，开箱即用',
    category: 'chart',
    preview: 'https://via.placeholder.com/300x200?text=ECharts',
    rating: 4.9,
    downloads: 8526,
    version: 'v1.8.0',
    author: '赵六',
    updateTime: '2025-01-08',
    badge: 'NEW',
    package: '@lowcode/echarts',
    demoUrl: 'https://demo.example.com/echarts',
    props: [
      { name: 'type', type: 'String', default: 'line', description: '图表类型' },
      { name: 'data', type: 'Array', default: '[]', description: '图表数据' }
    ],
    reviews: [
      { id: 1, user: '孙七', rating: 5, time: '2025-01-09', content: '图表很漂亮，配置简单！' }
    ]
  },
  {
    id: 3,
    name: '动态表单',
    description: '基于JSON配置的动态表单生成器',
    category: 'form',
    preview: 'https://via.placeholder.com/300x200?text=Dynamic+Form',
    rating: 4.7,
    downloads: 6428,
    version: 'v3.2.0',
    author: '周八',
    updateTime: '2025-01-05',
    package: '@lowcode/dynamic-form',
    demoUrl: 'https://demo.example.com/form',
    props: [
      { name: 'schema', type: 'Object', default: '{}', description: '表单配置' },
      { name: 'value', type: 'Object', default: '{}', description: '表单值' }
    ],
    reviews: []
  }
])

// 对话框
const showDetailDialog = ref(false)
const selectedComponent = ref(null)
const activeDetailTab = ref('intro')

// 筛选后的组件
const filteredComponents = computed(() => {
  let list = componentList.value

  // 分类筛选
  if (selectedCategory.value !== 'all') {
    list = list.filter(c => c.category === selectedCategory.value)
  }

  // 关键词搜索
  if (searchKeyword.value) {
    list = list.filter(c =>
      c.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      c.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  // 排序
  if (sortType.value === 'hot') {
    list = list.sort((a, b) => b.rating - a.rating)
  } else if (sortType.value === 'new') {
    list = list.sort((a, b) => new Date(b.updateTime) - new Date(a.updateTime))
  } else if (sortType.value === 'download') {
    list = list.sort((a, b) => b.downloads - a.downloads)
  }

  return list
})

// 选择分类
const selectCategory = (category) => {
  selectedCategory.value = category
}

// 获取分类类型
const getCategoryType = (category) => {
  const types = {
    form: 'primary',
    data: 'success',
    chart: 'warning',
    layout: 'info',
    business: 'danger'
  }
  return types[category] || 'info'
}

// 获取分类标签
const getCategoryLabel = (category) => {
  const labels = {
    form: '表单',
    data: '数据',
    chart: '图表',
    layout: '布局',
    business: '业务'
  }
  return labels[category] || category
}

// 查看详情
const viewDetail = (component) => {
  selectedComponent.value = component
  showDetailDialog.value = true
}

// 安装组件
const installComponent = (component) => {
  ElMessage.success(`正在安装 ${component.name}...`)
  setTimeout(() => {
    ElMessage.success(`${component.name} 安装成功！`)
    showDetailDialog.value = false
  }, 1500)
}
</script>

<style scoped lang="scss">
.component-market-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }

  .header-actions {
    display: flex;
    gap: 15px;
  }
}

.filter-card {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    gap: 20px;
  }
}

.component-list {
  .component-card {
    margin-bottom: 20px;
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-4px);
    }

    .component-preview {
      width: 100%;
      height: 160px;
      background: #f5f7fa;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 15px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .component-info {
      .component-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 8px;
      }

      .component-desc {
        font-size: 13px;
        color: #606266;
        margin-bottom: 15px;
        min-height: 40px;
      }

      .component-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
        font-size: 13px;
        color: #909399;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }

      .component-actions {
        display: flex;
        gap: 10px;

        .el-button {
          flex: 1;
        }
      }
    }
  }
}

.component-detail {
  .intro-content,
  .doc-content {
    h4 {
      margin: 20px 0 10px 0;
      color: #303133;
      font-size: 16px;
    }

    p {
      color: #606266;
      line-height: 1.6;
    }

    pre {
      background: #f5f7fa;
      padding: 15px;
      border-radius: 4px;
      overflow-x: auto;

      code {
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #303133;
      }
    }
  }

  .reviews-content {
    .review-item {
      padding: 15px;
      background: #f5f7fa;
      border-radius: 8px;
      margin-bottom: 15px;

      .review-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .reviewer-info {
          display: flex;
          align-items: center;
          gap: 10px;

          .reviewer-name {
            font-weight: bold;
            color: #303133;
          }
        }

        .review-rating {
          display: flex;
          align-items: center;
          gap: 10px;

          .review-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }

      .review-content {
        color: #606266;
        line-height: 1.6;
      }
    }
  }
}
</style>

